<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function checkMe(){
				// 验证通过标志 -- 默认所有验证都是通过的
				var isChecked = true;				
				// 提示信息
				var msg = "";
				//验证--用户名不能为空
				//获取用户名输入控件对象的内容
				var txtName = document.getElementById("txtName").value;
				if(txtName == null || txtName == ""){
					//验证失败
					isChecked = false;
					//错误提示信息
					msg += "请输入姓名！\n"
					document.getElementById("txtName").focus();
				}
				
				//密码非空验证
				var txtPsw = document.getElementById("txtPsw").value;
				if(txtPsw == null || txtPsw == ""){					
					//验证失败
					isChecked = false;
					//错误提示信息
					msg += "请输入密码！\n"
				}
				
				// 验证性别 是否选择
				// 使用循环验证单选组是否进行了选择
				var radioSex = document.getElementsByName("radSex");
				//遍历所有的单选组件，验证是否进行了选择
				var isChSex = false;
				for(var i =0;i<radioSex.length;i++){
					//判定是否进行了选择
					if(radioSex[i].checked){
						//选择了
						isChSex = true;
						//结束循环
						break;
					}
				}
				//设置性别验证结果
				if(!isChSex){
					
					isChecked = false;
					//错误提示信息
					msg += "请选择性别！\n"
				}
				
				//如果验证兴趣爱好是否进行了选择，则进行类似性别的验证
				//。。。。。。
				
				//学历验证 
				var myGrade = document.getElementById("selectXL").value;
				console.info(myGrade);
				if(myGrade == null || myGrade == ""){					
					//验证失败
					isChecked = false;
					//错误提示信息
					msg += "请选择学历！\n"
				}
				
				//	邮箱验证
				var txtMail = document.getElementById("txtMail").value;
				if(txtMail == null || txtMail == ""){
					//验证失败
					isChecked = false;
					//错误提示信息
					msg += "请输入邮箱！\n"
				}
				
				//正则表达式验证邮箱格式是否正确
				//定义邮箱验证的正则表达式
				var tegMail = /^\w+@\w+.[A-Za-z]{2,3}(.[A-Za-z]{2,3})?$/;
				if(tegMail.test(txtMail) == false){
					//邮箱格式不正确
					//验证失败
					isChecked = false;
					//错误提示信息
					msg += "邮箱格式不正确！\n"
				}
				
				//进行体检判定
				if(isChecked){
					//验证通过，进行提交表单
					return true;
				}else{
					//验证没有通过，阻止提交表单
					alert(msg);
					return false;
				}
			}
			
			function doSubmit(){
				//使用js提交form表单
				//from1.submit();
				if(checkMe()){
					
				document.getElementById("from1").submit();
				}
			}
		</script>
	</head>

	<body>
		<!--form表单：客户端浏览器用来向服务器端进行信息提交的标签
			写在form表单的标签的值才会被提交给服务器
			action -- 指定的是服务器端的那个程序（类-方法）进行响应；
			method -- 使用哪种方式进行数据从客户端发送到服务器。
			      选项：get -- 将客户端数据信息附加在访问连接url的尾端进行发送信息；
			                 缺点：需要附加在url之后，可能会以明文的形式显示，信息不安全；
			                长度会受到限制（不能大于255个制度） 
			                汉字容易乱码（字节流方式传输）
			       post -- 将客户端数据信息以数据包的形式发送到服务器端
			                 不在上述问题。
		-->
		<div align="center">
		<form id="from1" action="#" method="get">				
			<table border="1" cellpadding="0" cellspacing="0" 
				bordercolor="#AAD7DB" style="width: 80%; align-self: center;">
			<tbody>
			<tr>
				<td>姓名</td><td><input type="text" id="txtName" name="txtName" /></td>
			</tr>
			<tr>
				<td>登录密码</td>
				<td><input type="password" id="txtPsw" name="txtPsw"/></td>
			</tr>
			<tr>
				<td>性别</td>
				<!--radio类型的输入框：需要name属性值一样，才具有互斥选择性-->
				<td><input type="radio" id="radSex" name="radSex" /> 女
				    <input type="radio" id="radSex2" name="radSex"/>男					
			</tr>
			
			<tr>
				<td>个人简历</td>
				<td><input type="file" id="fileResume" name="fileResume"/></td>
			</tr>
			<tr>
				<td>兴趣爱好</td>
				<!--checkbox多选框：需要name属性保持一致；服务器是使用数组对一组checkbox控件的值进行接收的-->
				<td><input type="checkbox" id="chHobby1" name="chHobby"/>游泳
					<input type="checkbox" id="chHobby2" name="chHobby"/>爬山
				<input type="checkbox" id="chHobby3" name="chHobby"/>dota
				<input type="checkbox" id="chHobby4" name="chHobby"/>coding
				<input type="checkbox" id="chHobby5" name="chHobby"/>testing</td>
			</tr>
			<tr>
				<td>隐藏控件</td>
				<td><input style="" type="hidden" name="txthidden" id="txthidden" value="520" /></td>
			</tr>
			<tr>
				<td>学历</td>
				<td><select id="selectXL" name="selectXL" style="width: 120px;">
					<option value=""></option>
					<option value="DZ">大专</option>
					<option value="BK">本科</option>					
					<option value="SS">硕士</option>
					<option value="BS">博士</option>
				</select></td>
			</tr>
			<tr>
				<td>自我介绍</td>
				<td><textarea id="txtIntroduce" name="txtIntroduce" style="width: 200px;height: 60px;"></textarea></td>
			</tr>
			<tr>
				<td>邮箱</td>
				<td><input style="" name="txtMail" id="txtMail" /></td>
			</tr>
			<tr>
				<td><input type="button" value="提交" id="btnSubmit" onclick="return doSubmit();"/>
				<input type="submit" value="提交2" id="btnSubmit" onclick="return checkMe();"/></td>
				<td><input type="reset" value="重置" id="btnSubmit"/></td>
			</tr>
		</tbody>
		</table>
			
			
			
		</form>
		</div>
	</body>

</html>